<template>
  <div class="m-paging">
    <div v-if="type == 'showCur'">
      <button
        :disabled="curIndex === 1"
        @click="curIndex-- && onGoto(curIndex--)">
        上一页
      </button>
      <button v-for="index in pages"
        :key="index" 
        :class="{actived: curIndex === index}" 
        v-text="index"
        @click="onGoto(index)" class="pages-num">
      </button>
      <button
        :disabled="total === curIndex && total !== 0" 
        @click="curIndex++ && onGoto(curIndex++)">
        下一页
      </button>
      <span class="total-page" v-show="total > 0">共{{total}}页</span>
      <div class="go-page" v-show="total > 5">
        ，到第<input type="text" v-model="curPage">页
        <button @click="onChangePage">确定</button>
      </div>
    </div>
    <!-- 展示上一页，下一页 -->
    <div v-if="type == 'showArrow'">
      <button
        :disabled="curIndex === 1"
        @click="curIndex-- && onGoto(curIndex--)">
        上一页
      </button>
      <button
        :disabled="total === curIndex && total !== 0" 
        @click="curIndex++ && onGoto(curIndex++)">
        下一页
      </button>
      <span class="total-page" v-show="total > 0">共{{total}}页</span>
      <div class="go-page" v-show="total > 5">
        ，到第<input type="text" v-model="curPage">页
        <button @click="onChangePage">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 1
    },
    showItem: {
      type: Number,
      default: 5
    },
    total: {
      type: Number,
      default: 4
    },
    // 根据类型，展示不同的分页
    type: {
      type: String,
      default: 'showCur'
    }
  },
  data() {
    return {
      curIndex: this.current,
      curPage: null
    }
  },
  watch: {
    current() {
      this.curIndex = this.current
    }
  },
  computed: {
    pages() {
      let page = []
      if (this.curIndex < this.showItem) {
        let i = Math.min(this.showItem, this.total)
        while (i) {
          page.unshift(i--)
        }
      } else {
        let middle = this.curIndex - Math.floor(this.showItem / 2)
        let i = this.showItem
        if (middle > (this.total - this.showItem)) {
          middle = (this.total - this.showItem) + 1
        }
        while (i--) {
          page.push(middle++)
        }
      }
      return page
    }
  },
  methods: {
    onGoto(index) {
      if (this.curIndex !== index) {
        this.curIndex = index
        window.scrollTo(0, 0)
        this.$emit('page', index)
      }
    },
    onChangePage() {
      const curPage = Number(this.curPage)
      if (curPage > 0 && curPage <= this.total) {
        this.onGoto(curPage)
      }
      this.curPage = null
    }
  }
}
</script>

<style lang="scss" scoped>
.m-paging {
  display: block;
  margin: 20px 0;
  text-align: right;
  font-size: 0;
  button {
    padding: 4px 8px;
    margin-right: 5px;
    border-radius: 2px;
    font-size: 16px;
    color: #444;
    .pages-num {
      height: 20px;
      width: 20px;
      margin-right: 5px;
      border-radius: 0px;
      font-size: 16px;
      padding: 0;
    }
    &:hover {
      color: #f10180;
      border-color: #f10180;
    }
    &.actived {
      color: #fff;
      background: #f10180;
    }
    &[disabled] {
      color: #999;
      cursor: default;
    }
  }
  .total-page {
    display: inline-block;
    font-size: 14px;
    color: #999;
  }
  .go-page {
    display: inline-block;
    font-size: 14px;
    color: #999;
    input {
      width: 30px;
      height: 20px;
      padding: 0 6px;
      border: 1px solid #ccc;
      border-radius: 2px;
      margin: 0 6px;
      text-align: center;
      background: transparent;
    }
    button {
      font-size: 14px;
    }
  }
}
</style>